/**
 * 材质选择器 
 */

import { Descriptions, Select } from "antd";
import EditMaterial from "../../";
import React from "react";
import * as THREE from "three";

export default function SelectedProperties() {

    const controller = EditMaterial.useController();

    const geometry = controller.useMemo(s => s.geometry, []);

    const onChange = React.useCallback((e: string) => {
        const MyMesh = THREE[e];
        try {
            controller.onChange(new MyMesh());
        } catch (error) {
            console.error(error);
        }
    }, [controller])

    const value = React.useMemo(() => {
        if (geometry instanceof THREE.BoxBufferGeometry) {
            return 'BoxBufferGeometry';
        } else if (geometry instanceof THREE.SphereBufferGeometry) {
            return 'SphereBufferGeometry';
        }
        return undefined;
    }, [geometry])

    return (
        <Descriptions bordered column={1} size="small" >
            <Descriptions.Item label="形状类型" labelStyle={{ width: 70 }} >
                <Select size="small" style={{ width: '100%' }} value={value} onChange={onChange} >
                    <Select.Option value="BoxBufferGeometry">(立方) BoxBufferGeometry</Select.Option>
                    <Select.Option value="SphereBufferGeometry">(球) SphereBufferGeometry</Select.Option>
                </Select>
            </Descriptions.Item>
        </Descriptions>
    )
}